<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Gallery Static － A Single Page App demo using Senna.js</title>

  <!-- Demo -->
  <link rel="shortcut icon" href="http://sennajs.com/images/favicon.ico">
  <link rel="stylesheet" href="../../bower_components/pure/pure-min.css">
  <link rel="stylesheet" href="css/gallery-grid.css">
  <link rel="stylesheet" href="css/gallery.css">

  <!-- Using Senna's optional style -->
  <link rel="stylesheet" href="../../build/senna.css">

  <!-- Including Senna -->
  <script src="../../build/globals/senna-debug.js"></script>

  <!-- Initializing Senna -->
  <script src="js/static.js"></script>
</head>
<body class="senna-transition-fade">
  <div class="senna-loading-bar"></div>
  <div id="preview">
    <div class="visible">
       <div class="overlay"></div>
       <span class="canvas">
         <a href="static.html" class="overlay-close">x</a>
         <a href="static.html">
           <img class="pure-img" src="img/01.jpg" alt="">
         </a>
         <a class="arrow left" href="static08.html">&#10096;</a>
         <a class="arrow right" href="static02.html">&#10097;</a>
       </span>
     </div>
  </div>
  <div>
    <div class="pure-g">
      <div class="photo-box u-1 u-med-1-3 u-lrg-1-4">
        <a href="static01.html">
          <img src="img/01.jpg" alt="">
        </a>
      </div>

      <div class="text-box u-1 u-med-2-3 u-lrg-3-4">
        <div class="l-box">
          <h1 class="text-box-head">Gallery</h1>
          <p class="text-box-subhead">A Single Page App demo using Senna.js</p>
        </div>
      </div>

      <div class="photo-box u-1 u-med-1-2 u-lrg-1-3">
        <a href="static02.html">
          <img src="img/02.jpg" alt="">
        </a>
      </div>

      <div class="photo-box u-1 u-med-1-2 u-lrg-1-3">
        <a href="static03.html">
          <img src="img/03.jpg" alt="">
        </a>
      </div>

      <div class="photo-box u-1 u-med-1-2 u-lrg-1-3">
        <a href="static04.html">
          <img src="img/04.jpg" alt="">
        </a>
      </div>

      <div class="photo-box u-1 u-med-1-2 u-lrg-1-3">
        <a href="static05.html">
          <img src="img/05.jpg" alt="">
        </a>
      </div>

      <div class="photo-box photo-box-thin u-1 u-lrg-2-3">
        <a href="static06.html">
          <img src="img/06.jpg" alt="">
        </a>
      </div>

      <div class="photo-box photo-box-thin u-1 u-med-2-3">
        <a href="static07.html">
          <img src="img/07.jpg" alt="">
        </a>
      </div>

      <div class="photo-box u-1 u-med-1-3">
        <a href="static08.html">
          <img src="img/08.jpg" alt="">
        </a>
      </div>
    </div>
  </div>
</body>
</html>
